<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../../css/web.css">
	<link rel="stylesheet" type="text/css" href="../../fonts/iconfont.css">
	<script type="text/javascript" src="../../js/jquery.min.js"></script>
	<script type="text/javascript" src="../../js/jquery.SuperSlide.2.1.1.js"></script>
	<script type="text/javascript" src="../../js/laydate/laydate.js"></script>
</head>
<body id="writeComplain">

	<div class="wrap">

		<div class="top">
	        <div class="Topsearch clearfix">
	            <div class="logo left"><img src="../../img/indexLogo.png"></div>
	            <div class="search right">
	                <div class="Insearch clearfix"><input class="left" type="text" name="" placeholder="请输入关键字"><button class="left">搜索</button></div>
	                <div class="searchHot">
	                    <span>热搜词 : </span>
	                    <a href="javascript:;">天后宫</a>
	                    <a href="javascript:;">湿地公园</a>
	                    <a href="javascript:;">景点</a>
	                    <a href="javascript:;">特产</a>
	                </div>
	            </div>
	        </div>
	        <ul class="TopNav clearfix">
	            <li><a class="haveBorder first" href="../../index.html">首页</a></li>
	            <li><a class="haveBorder" href="../active.html">政务动态</a></li>
	            <li><a class="haveBorder" href="../open.html">政务公开</a></li>
	            <li><a class="haveBorder" href="../service.html">办事服务</a></li>
	            <li><a class="haveBorder" href="../interaction.html">公众互动</a></li>
	            <li class="active"><a class="haveBorder" href="../public.html">公众服务</a></li>
	            <li><a href="../toppic.html">专题中心</a></li>
	        </ul>  
	    </div>

		<div class="content">
			<div class="counterNav">
				<div class="complainSlide">
					<div class="hd">
						<ul class="clearfix"><li class="left">在线投诉</li><li class="left">投诉查询</li></ul>
					</div>

					<div class="bd">
						<ul class="Allinputs">
							<li>
								<p class="title">投诉基本情况</p>
								<ul class="inner clearfix">
									<li class="clearfix">
										<div class="inputs left">								
											<span>旅游方式 :</span>
											<div class="select" id="way">
						                        <h1 val="A">个人</h1>
						                        <ul>
						                            <li val="A">个人</li>
						                            <li val="B">团体</li>
						                        </ul>
						                        <i class="icon iconfont icon-xialajiantouxiangxia arrow"></i>
						                    </div>
										</div>
										<div class="left inputs three">
											<span>发生地 :</span>
											<input type="text" name="" placeholder="请填写投诉事由发生地">
										</div>
									</li>
									<li class="clearfix">							
										<div class="left inputs">
											<span>出行人数 :</span>
											<input type="text" name="" placeholder="请填写出行人数">
										</div>
										<div class="left inputs three">
											<span>目的地 :</span>
											<input type="text" name="" placeholder="请填写出行目的地">
										</div>
									</li>								
								</ul>
							</li>

							<li class="twoRow">
								<p class="title">投诉人信息</p>
								<ul class="inner">
									<li class="clearfix">
										<div class="inputs clearfix left">
											<div class="clearfix name left">
												<span class="left">
													<span class="sign">*</span>
													姓
												</span>
												<span class="secname right">名 :</span></span>
											</div>
											<input id="Cname" class="special right" type="text" name="" placeholder="请填写投诉人姓名">
											<i class="icon iconfont icon-xxxxxx- Ckong"></i>
											<span class="warn warnKongN">不能为空</span>
										</div>
										<div class="left inputs">
											<span class="sign">*</span>
											<span>联系电话 :</span>
											<input id="mobile" type="text" name="" placeholder="请填写您的电话" class=" specialI">
											<i class="icon iconfont icon-xxxxxx- mobileI"></i>
											<span class="warn warnM">请输入正确的电话号码</span>
										</div>
									</li>
									<li class="clearfix zMax">
										<div class="left inputs">
											<div class="clearfix name">
												<span class="left">
													<span class="sign">*</span>
													国
												</span>
												<span class="secname right">籍 :</span></span>
											</div>								 
								            <div class="select right" id="country" >
						                        <h1 val="A">国籍</h1>
						                        <ul>
						                            <li val="A">中国</li>
						                            <li val="B">美国</li>
						                            <li val="C">德国</li>
						                        </ul>
						                        <i class="icon iconfont icon-xialajiantouxiangxia arrow"></i>
						                    </div>
										</div>
										<div class="left inputs">
											<span class="sign">*</span>
											<span>电子邮箱 :</span>
											<input id="email" type="text" name="">
											<i class="icon iconfont icon-xxxxxx- emailI"></i>
											<span class="warn warnE">请输入正确的邮箱地址</span>
										</div>
									</li>
									<li class="clearfix">
										<div class="left inputs">
											<span class="sign">*</span>
											<span>证件类型 :</span> 
								            <div class="select" id="type" >
						                        <h1 val="A">身份证</h1>
						                        <ul>
						                            <li val="A">身份证</li>
						                            <li val="B">士兵证</li>
						                            <li val="C">护照</li>
						                            <li val="D">港澳回归证</li>
						                            <li val="E">出生证</li>
						                            <li val="F">户口本</li>
						                        </ul>
						                        <i class="icon iconfont icon-xialajiantouxiangxia arrow"></i>
						                    </div>
										</div>
										<div class="left inputs">
											<span class="sign">*</span>
											<span> 联系地址 :</span>
											<input id="Caddress" type="text" name="">
											<i class="icon iconfont icon-xxxxxx- Akong"></i>
											<span class="warn warnKongA">不能为空</span>
										</div>
									</li>

									<li class="clearfix">
										<div class="left inputs">
											<span class="sign">*</span>
											<span>证 件 号 :</span>
											<input id="card" class="cardInput specialI" type="text" name="">
											<i class="icon iconfont icon-xxxxxx- cardI"></i>
											<span class="warn warnC">请输入正确的证件号码</span>
										</div>							
									</li>
								</ul>
							</li>							
							
							<li class="btns">
								<a href="SecondWriteComplain.html">下 一 步</a>
							</li>
						</ul>

						<ul class="Allinputs">
							<li class="clearfix search">
								<div class="left phone"><span>手机号</span><input type="" name="" placeholder="请输入手机号码"></div>
								<div class="left code"><span>验证码</span><input type="" name="" placeholder="请输入验证码"></div>
								<div class="left get">获取验证码</div>
							</li>
							<li class="inBtn">
								<button class="btn">查询</button>
								<p class="num">本次搜索共搜到<span> 10 </span>条</p>
							</li>
							<li>
								<table id="table" class="display" cellspacing="0" width="100%">
									<thead>
										<tr>
											<th>投诉主题</th>
											<th>时间</th>
											<th> </th>										
										</tr>
									</thead>
									<tbody>
										<tr>
											<td><a href="complainDetial.html">因为酒店乱收费的投诉因为酒店乱收费的投诉</a></td>
											<td>2016-10-19、18:00:00</td>
											<td>查看</td>
										</tr>
										<tr>
											<td><a href="complainDetial.html">因为酒店乱收费的投诉因为酒店乱收费的投诉</a></td>
											<td>2016-10-19、18:00:00</td>
											<td>查看</td>
										</tr>
										<tr>
											<td><a href="complainDetial.html">因为酒店乱收费的投诉因为酒店乱收费的投诉</a></td>
											<td>2016-10-19、18:00:00</td>
											<td>查看</td>
										</tr>
										<tr>
											<td><a href="complainDetial.html">因为酒店乱收费的投诉因为酒店乱收费的投诉</a></td>
											<td>2016-10-19、18:00:00</td>
											<td>查看</td>
										</tr>
										<tr>
											<td><a href="complainDetial.html">因为酒店乱收费的投诉因为酒店乱收费的投诉</a></td>
											<td>2016-10-19、18:00:00</td>
											<td>查看</td>
										</tr>
										<tr>
											<td><a href="complainDetial.html">因为酒店乱收费的投诉因为酒店乱收费的投诉</a></td>
											<td>2016-10-19、18:00:00</td>
											<td>查看</td>
										</tr>
										<tr>
											<td><a href="complainDetial.html">因为酒店乱收费的投诉因为酒店乱收费的投诉</a></td>
											<td>2016-10-19、18:00:00</td>
											<td>查看</td>
										</tr>
										<tr>
											<td><a href="complainDetial.html">因为酒店乱收费的投诉因为酒店乱收费的投诉</a></td>
											<td>2016-10-19、18:00:00</td>
											<td>查看</td>
										</tr>
										<tr>
											<td><a href="complainDetial.html">因为酒店乱收费的投诉因为酒店乱收费的投诉</a></td>
											<td>2016-10-19、18:00:00</td>
											<td>查看</td>
										</tr>
										<tr>
											<td><a href="complainDetial.html">因为酒店乱收费的投诉因为酒店乱收费的投诉</a></td>
											<td>2016-10-19、18:00:00</td>
											<td>查看</td>
										</tr>
										<tr>
											<td><a href="../interactionDetial.html">因为酒店乱收费的投诉因为酒店乱收费的投诉</a></td>
											<td>2016-10-19、18:00:00</td>
											<td>查看</td>
										</tr>
										<tr>
											<td><a href="complainDetial.html">因为酒店乱收费的投诉因为酒店乱收费的投诉</a></td>
											<td>2016-10-19、18:00:00</td>
											<td>查看</td>
										</tr>
									</tbody>
								</table>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<div class="d-footer clearfix">
	        <ul class="left link">
	            <li class="title">友情链接</li>
	            <li class="clearfix"><a class="left" href="javascript:;">南沙区政府</a><a class="right" href="javascript:;">广州市体育局</a></li>
	            <li class="clearfix"><a class="left" href="javascript:;">广州市旅游局</a><a class="right" href="javascript:;">广州市文广局</a></li>
	            <li class="clearfix"><a class="left" href="javascript:;">广州市政府</a><a class="right" href="javascript:;">广东省政府</a></li>
	        </ul>
	        <ul class="QRcode left">
	            <li><img src="../../img/weixin.png"><p>印象南沙</p></li>
	            <li><img src="../../img/APP.png"><p>印象南沙</p></li>
	            <li><img src="../../img/gongzhong.png"><p>印象南沙</p></li>
	        </ul>
	        <ul class="left copy">
	            <li>
	                <a href="aboutUs.html"><span>关于我们</span></a>
	                <span class="between">-</span>
	                <a href="aboutUs.html"><span>版权保护</span></a>
	                <span class="between">-</span>
	                <a href="aboutUs.html"><span>网站帮助</span></a>
	                <span class="between">-</span>
	                <a href="map.html"><span>网站地图</span></a>
	            </li>
	            <li>2016 &copy 版权归广州市南沙区文化广电新闻出版局所有</li>
	            <li>地址 : 广州市南沙区凤凰大道1号</li>
	            <li>粤ICP备10041711号-3</li>
	        </ul>
	    </div>

	</div>

	<script type="text/javascript">
		jQuery(".scrollTop").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:"<li><a></a></li>",effect:"left",autoPlay:true,vis:1,trigger:"click"});
		jQuery(".complainSlide").slide({trigger:"click"});
		
		function checkMobile(str){  
	       var re=/^1[34578]\d{9}$/;  
	       if(!re.test(str))  
	       {  
	          	$("#mobile").css("border","1px #ff0000 solid");
	        	$(".mobileI").css("display","inline-block");
	        	$(".warnM").css("display","inline-block");
	       }else{
	       		$("#mobile").css("border","1px #ccc solid");
	        	$(".mobileI").css("display","none");
	        	$(".warnM").css("display","none");
	       }
	   }  
	     

	   function checkEmail(str)  
	   {  
	       re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/  
	       if(re.test(str))  
	       {  
	       		$("#email").css("border","1px #ccc solid");
	        	$(".emailI").css("display","none");
	        	$(".warnE").css("display","none");
	          	 
	       }else{
	       		$("#email").css("border","1px #ff0000 solid");
	         	$(".emailI").css("display","inline-block"); 
	         	$(".warnE").css("display","inline-block");
	       }
	   }  

	   function checkAcard(str)  
	   {  	
	   		//身份证
	       	var re=/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;  
	        if(re.test(str))  
	       	{  
	       		$("#card").css("border","1px #ccc solid");
	        	$(".cardI").css("display","none");
	        	$(".warnC").css("display","none");
	          
	       	}else{
	       		$("#card").css("border","1px #ff0000 solid");
	           	$(".cardI").css("display","inline-block");  
	           	$(".warnC").css("display","inline-block"); 
	       	}

	   }  

	   function checkBcard(str)  
	   {  	
	   		//士兵证
	       	var re=/^[a-zA-Z0-9]{7,21}$/;  
	        if(re.test(str))  
	       	{  
	       		$("#card").css("border","1px #ccc solid");
	        	$(".cardI").css("display","none");
	        	$(".warnC").css("display","none");
	          
	       	}else{
	       		$("#card").css("border","1px #ff0000 solid");
	           	$(".cardI").css("display","inline-block");  
	           	$(".warnC").css("display","inline-block"); 
	       	}

	   }  

	   function checkCcard(str)  
	   {  
	   		//护照
	       	var re=/^1[45][0-9]{7}|([P|p|S|s]\d{7})|([S|s|G|g]\d{8})|([Gg|Tt|Ss|Ll|Qq|Dd|Aa|Ff]\d{8})|([H|h|M|m]\d{8，10})$/;  
	        if(re.test(str))  
	       	{  
	       		$("#card").css("border","1px #ccc solid");
	        	$(".cardI").css("display","none");
	        	$(".warnC").css("display","none");
	          
	       	}else{
	       		$("#card").css("border","1px #ff0000 solid");
	           	$(".cardI").css("display","inline-block");  
	           	$(".warnC").css("display","inline-block"); 
	       	}

	   }  

	   function checkDcard(str)  
	   {  
	   		//港澳回归证
	       	var re=/^[a-zA-Z0-9]{5,21}$/;  
	        if(re.test(str))  
	       	{  
	       		$("#card").css("border","1px #ccc solid");
	        	$(".cardI").css("display","none");
	        	$(".warnC").css("display","none");
	          
	       	}else{
	       		$("#card").css("border","1px #ff0000 solid");
	           	$(".cardI").css("display","inline-block");  
	           	$(".warnC").css("display","inline-block"); 
	       	}

	   }  

	   function checkEcard(str)  
	   {  
	   		//出生证
	       	var re=/^[a-zA-Z0-9]{5,21}$/;  
	        if(re.test(str))  
	       	{  
	       		$("#card").css("border","1px #ccc solid");
	        	$(".cardI").css("display","none");
	        	$(".warnC").css("display","none");
	          
	       	}else{
	       		$("#card").css("border","1px #ff0000 solid");
	           	$(".cardI").css("display","inline-block");  
	           	$(".warnC").css("display","inline-block"); 
	       	}
	   }  

	   function checkFcard(str)  
	   {  
	   		//户口本
	       	var re=/^[a-zA-Z0-9]{3,21}$/;  
	        if(re.test(str))  
	       	{  
	       		$("#card").css("border","1px #ccc solid");
	        	$(".cardI").css("display","none");
	        	$(".warnC").css("display","none");
	          
	       	}else{
	       		$("#card").css("border","1px #ff0000 solid");
	           	$(".cardI").css("display","inline-block");  
	           	$(".warnC").css("display","inline-block"); 
	       	}
	   }  

	   $("#card").blur(function(){
			var Tvalue = $('#type h1').attr("val");

				if(Tvalue == "A"){
					
						checkAcard($("#card").val());
					
				}else if(Tvalue == "B"){
					
						checkBcard($("#card").val());
					
				}else if(Tvalue == "C"){
					
						checkCcard($("#card").val());
				
				}else if(Tvalue == "D"){
					
						checkDcard($("#card").val());
					
				}else if(Tvalue == "E"){
					
						checkEcard($("#card").val());
				
				}else if(Tvalue == "F"){
					
						checkFcard($("#card").val());
				
				}
			
		});

	  	$("#mobile").blur(function(){
			checkMobile($("#mobile").val());
		});

		$("#email").blur(function(){
			checkEmail($("#email").val());
		});

		$("#title").blur(function(){
			console.log($("#title").val().length)
			if($("#title").val().length<10){
				$("#title").css("border","1px #ff0000 solid");
	        	$(".titleI").css("display","inline-block");
	        	$(".warnT").css("display","inline-block");
	        }else{
	        	$("#title").css("border","1px #ccc solid");
	        	$(".titleI").css("display","none");
	        	$(".warnT").css("display","none");
	        }
		})


		$("#Cname").blur(function(){
			if($("#Cname").val().length<=0){
				$("#Cname").css("border","1px #ff0000 solid");
	        	$(".Ckong").css("display","inline-block");
	        	$(".warnKongN").css("display","inline-block");
	        }else{
	        	$("#Cname").css("border","1px #ccc solid");
	        	$(".Ckong").css("display","none");
	        	$(".warnKongN").css("display","none");
	        }
		})

		$("#Caddress").blur(function(){
			if($("#Caddress").val().length<=0){
				$("#Caddress").css("border","1px #ff0000 solid");
	        	$(".Akong").css("display","inline-block");
	        	$(".warnKongA").css("display","inline-block");
	        }else{
	        	$("#Caddress").css("border","1px #ccc solid");
	        	$(".Akong").css("display","none");
	        	$(".warnKongA").css("display","none");
	        }
		})

		// 下拉选择框
	    var isDown = true;
	    var canDown = true;
	    $('#country').on('click', function (e) {
	        if (isDown) {
	            $(this).find('ul').show();
	            isDown = false;
	        } else {
	            $(this).find('ul').hide();
	            isDown = true;
	        }
	        e.stopPropagation();
	    });

	    $('#way').on('click', function (e) {
	        if (isDown) {
	            $(this).find('ul').show();
	            isDown = false;
	        } else {
	            $(this).find('ul').hide();
	            isDown = true;
	        }
	        e.stopPropagation();
	    });

	    $('#type').on('click', function (e) {
	        if (canDown) {
	        	if($('#country h1').attr("val") !== "A"){
	        		return;	        		
	        	}
	            $(this).find('ul').show();
	            canDown = false;
	        } else {
	            $(this).find('ul').hide();
	            canDown = true;
	        }
	        e.stopPropagation();
	    });


	   	// 点击选择
	    $('#country ul li').on('click', function (e) {
	        $('#country h1').text($(this).text());
	        $('#country h1').attr("val",$(this).attr("val"));
	        $(this).parent('ul').hide();
	        isDown = true;
	        e.stopPropagation();
	        if($(this).attr("val") !== "A"){
	        		$("#type h1").text("护照");
	        		$("#type h1").attr("val","C");
	        	}
	    });

	    $('#type ul li').on('click', function (e) {
	        $('#type h1').text($(this).text());
	        $('#type h1').attr("val",$(this).attr("val"));
	        $(this).parent('ul').hide();
	        isDown = true;
	        e.stopPropagation();
	        console.log($('#type h1').attr("val"))
	    });

	    $('#way ul li').on('click', function (e) {
	        $('#way h1').text($(this).text());
	        $('#way h1').attr("val",$(this).attr("val"));
	        $(this).parent('ul').hide();
	        isDown = true;
	        e.stopPropagation();
	        console.log($('#way h1').attr("val"))
	    });

	    $(document).off('click');
	    $(document).on('click', function () {
	        isDown = true;
	        canDown = true;
	        $('#country ul').hide();
	        $('#type ul').hide();
	        $('#way ul').hide();
	    });

	    $(window).off('scroll');
	    $(window).on('scroll', function () {
	        isDown = true;
	        canDown = true;
	        $('#country ul').hide();
	        $('#type ul').hide();
	        $('#way ul').hide();
	    });

	    $(function(){ 
             var item = $("tbody tr"); 
             for(var i=0;i<item.length;i++){ 
                 if(i%2==1){ 
                     item[i].style.backgroundColor="#eeeeee"; 
                 } 
             } 
             //$("#tb tbody tr:even").css("backgroundColor","#888"); 
   
         });

	 



	</script>

</body>
</html>